import { Button, Card, DatePicker, Form, message, Select } from 'antd'
import type { DatePickerProps } from 'antd'
import React, { useEffect, useRef, useState } from 'react'
import './index.scss'
// antd图标
import { HighlightOutlined } from '@ant-design/icons'
import TableYe from './Subpage/Table'
import Popup from './Subpage/Popup'
import { useDispatch } from 'react-redux'
import {
  addBillData,
  getBillData,
  setBillData,
} from '../../../../store/action/billData'
import { getTableData } from '../../../../utils/tableData'
// 导入时间处理
import moment from 'moment'
type SizeType = Parameters<typeof Form>[0]['size']
const { Option } = Select

const Bill: React.FC = () => {
  const dispatch = useDispatch()

  // 类别
  let leiBie = ['早餐', '电子', '工资', '理财', '衣物', '其他']

  // 表单筛选信息
  let formRefTitle: any = useRef()
  // 存储月份选择器的变量
  const [yueDate, setYueDate] = useState('')

  // 点击查询
  const onFinish = (values: any) => {
    // console.log('Success:', values)
    dispatch(getBillData([yueDate, leiBie[values.sort]]) as any)
    message.success('查询完毕！')
  }
  // 点击重置
  const reset = () => {
    dispatch(getBillData() as any)
    // 清空表单
    formRefTitle.current.resetFields()
    setYueDate('')
    message.success('重置完毕！')
  }

  const onChange: DatePickerProps['onChange'] = (date, dateString) => {
    // console.log(date, dateString)
    setYueDate(dateString)
  }

  const handleChange = (value: string) => {
    // console.log(`selected ${value}`)
  }

  // 进入页面时加载数据
  useEffect(() => {
    // 如果有数据则不用加载
    if (getTableData()) return
    dispatch(setBillData() as any)
  }, [])
  return (
    // 账单页面
    <Card className="Bill">
      {/* 头部筛选内容区域 */}
      <Form
        className="head"
        ref={formRefTitle}
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        autoComplete="off">
        <Form.Item name="DatePicker" style={{ width: '12vw' }}>
          <DatePicker
            placeholder="月选择器"
            style={{ width: '10vw' }}
            onChange={onChange}
            picker="month"
          />
        </Form.Item>
        <Form.Item name="sort">
          <Select
            placeholder={'分类选择器'}
            style={{ width: 120 }}
            onChange={handleChange}>
            {leiBie.map((item, index) => {
              return (
                <Option key={index} value={index}>
                  {item}
                </Option>
              )
            })}
          </Select>
        </Form.Item>
        <Form.Item
          wrapperCol={{ offset: 8, span: 16 }}
          style={{ margin: '0 2vw 0 2vw' }}>
          <Button type="primary" htmlType="submit">
            查询
          </Button>
        </Form.Item>
        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="dashed" onClick={reset}>
            重置
          </Button>
        </Form.Item>
      </Form>
      {/* 记一笔 */}
      <Popup style={{ width: '100px', height: '40px' }} />
      {/* 表格内容区域 */}
      <TableYe />
    </Card>
  )
}

export default Bill
